<template>
    <view>
        <view class="topbox clear">
            <image class="topbgimg" :src="baseUrl + item.images" mode="widthFix"></image>
            <view class="top">
                <image @click="toBack" src="https://daiyue.gzzhenyi.net/static/products/back.png" mode="widthFix">
                </image>
                <image @click="navTo(`/long/search/search`)"
                    src="https://daiyue.gzzhenyi.net/static/products/search.png" mode="widthFix">
                </image>
            </view>
        </view>

        <view class="outItemContent">
            <view class="outItemTitle">{{ item.name }}</view>
            <view class="outItemText">
                <span class="outItemText-buld">{{ item.rank }}</span>
                <span class="outItemText-bus">{{ item.is_public == 1 ? '公立' : '私立' }}</span>
            </view>
            <view class="outItemFlex">
                <view class="outItemAddress">地址:{{ item.addr }}</view>
                <view class="outItemAddressKm">80KM</view>
            </view>
            <view class="outItemContentText">
                {{ item.brief }}</view>
            <view class="outItemSpan">

                <view class="outItemSpanTitle">重点科室</view>
                <view class="outItemSpan-list">
                    <span>{{ item.departments }}</span>
                </view>
            </view>
        </view>



        <view class="content-box-detail">
            <view class="content-box-detail-title">详情</view>
            <view class="content-box-detail-content" v-html="replaceWhite(item.content)">

            </view>
        </view>
        <view class="content-box-detail-bottom">
            <view class="content-box-detail-bottom-content">
                <view class="content-box-detail-bottom-content-left" @click="navTo(item.id)">
                    <image src="https://daiyue.gzzhenyi.net/static/index/serviceFFFF.svg" mode="widthFix" />
                    <span>咨询</span>
                </view>
                <view class="content-box-detail-bottom-content-right" @click="clickPhone(item.tel)">
                    <image src="https://daiyue.gzzhenyi.net/static/image/user/phone.png" mode="widthFix" />
                    <span>联系方式</span>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
import { getHospitalDetail } from '@/api/api'
import baseUrl from '@/api/baseUrl';
import { replaceWhite } from '@/util/util'
export default {

    data() {
        return {
            baseUrl,
            replaceWhite,
            funList: ['治疗', '辅助治疗', '辅助治疗', '辅助治疗'],
            collapse: false,
            showPopup: false,
            id: '',
            item: {}
        };
    },
    onLoad(options) {
        this.id = options.id;
        this.detail()
    },
    methods: {
        detail() {
            getHospitalDetail({ id: this.id }).then(res => {
                if (res.code == 1) {
                    this.item = res.data
                }
            })
        },
        navTo(id) {
            let token = uni.getStorageSync('token')
            if (!token) {
                uni.showModal({
                    title: '提示',
                    content: '你还没登录，是否去登录？',
                    success: (res) => {
                        if (res.confirm) {
                            uni.switchTab({ url: '/pages/user/user' })
                            console.log('用户点击确定');
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            }
            uni.navigateTo({
                url: '/subCure/advisory/advisory?id=' + id
            })
        },
        toBack() {
            uni.navigateBack()
        },
        clickPhone(phone) {
            if (phone) {
                uni.makePhoneCall({
                    phoneNumber: phone
                })
            } else {
                uni.showToast({
                    title: '暂无联系方式',
                    icon: 'none'
                })
            }

        }
    }
}
</script>
z
<style lang="scss">
page {
    background: #eeeeee;
}

.clear:after {
    display: block;
    content: " ";
    clear: both;
    height: 0;
}

.topbox {
    .topbgimg {
        width: 100%;
    }

    .top {
        position: fixed;
        top: 0;
        left: 0;
        background-size: 100%;
        background-repeat: no-repeat;
        box-sizing: border-box;
        width: 100%;
        z-index: 99;
        padding-left: 40rpx;
        padding-top: 10%;
        column-gap: 55%;
        display: flex;

        image {
            width: 55rpx;
            height: 55rpx;
            margin-top: 4.2%;
        }
    }
}


.outItemContent {
    background-color: #ffffff;
    padding: 30upx;
    border-radius: 15upx;
    margin-bottom: 30upx;
    margin-top: -63px;
    z-index: 99;
    position: relative;
    // width: 100%;
    z-index: 99;

    .outItemTitle {
        color: #333333;
        font-size: 30upx;
        margin-bottom: 5upx;
    }

    .outItemText {
        display: flex;
        column-gap: 15upx;
        margin-bottom: 15upx;
        font-size: 20upx;
        color: #fff;
        text-align: center;

        .outItemText-bus {
            background-color: #3A6DF9;
            border-radius: 4upx;
            padding: 5upx 10upx;
        }

        .outItemText-buld {
            background-color: #FCAB78;
            border-radius: 4upx;
            padding: 5upx 10upx;

        }
    }
}

.outItemFlex {
    display: flex;
    align-items: center;
    font-size: 24upx;
    color: #878787;

    .outItemAddress {
        max-width: 420upx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        word-break: break-all;
    }

    .outItemAddressKm {
        border-left: 1px solid #878787;
        padding-left: 10upx;
        margin-left: 5upx;

    }
}

.outItemContentText {
    font-size: 24upx;
    color: #333333;
    margin-top: 15upx;

}

.outItemSpan {
    display: flex;
    margin-top: 20upx;

    span {
        font-size: 24upx;
        color: #333333;
        // margin-top: 15upx;
        border-right: 1px solid #333333;
        padding-right: 10upx;
        margin-right: 10upx;
    }

    span:last-child {
        border: 0;
    }



}

.outItemSpanTitle {
    font-size: 24upx;
    color: #3D3D3D;
    margin-right: 30upx;
    width: 100upx;
    margin-top: 10upx;
}

.outItemSpan-list {
    // display: flex;
    // column-gap: 20upx;
    // flex-wrap: wrap;

    span {
        color: #ffff;
        background-color: #47B3F6;
        padding: 5upx 25upx;
        border-radius: 30px;
        font-size: 20upx;
        border: 0;
    }
}


.content-box-detail {
    background-color: #ffffff;
    border-radius: 15upx;
    margin-bottom: 30upx;
    padding: 30upx 0;
    padding-bottom: 150upx;
    margin-top: 30upx;

    .content-box-detail-title {
        color: #333333;
        font-size: 30upx;
        padding: 0 30upx 30upx 30upx;
    }

    .content-box-detail-content {
        image {
            width: 100%;
            height: auto;

        }
    }
}

.content-box-detail-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    padding: 15upx 30upx 70upx 30upx;

    .content-box-detail-bottom-content {
        display: flex;
        align-items: center;
        justify-content: center;

        .content-box-detail-bottom-content-left {
            display: flex;
            align-items: center;
            background-color: #28C445;
            border-radius: 50upx 0 0 50upx;
            padding: 15upx 120upx;

            image {
                width: 30upx;
                height: 30upx;
            }

            span {
                font-size: 26upx;
                color: #ffffff;
                margin-left: 15upx;
            }
        }

        .content-box-detail-bottom-content-right {
            display: flex;
            align-items: center;
            background-color: #359BEF;
            border-radius: 0 60upx 60upx 0;
            padding: 15upx 90upx;

            image {
                width: 30upx;
                height: 30upx;
            }

            span {
                font-size: 26upx;
                color: #ffffff;
                margin-left: 15upx;
            }
        }
    }
}
</style>